<!--
Copyright 2012 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html><meta charset="UTF-8">
<style>
.anim {
  width: 200px;
  height: 200px;
  display: inline-block;
  border-style: solid;
  font-weight: bold;
  border-color: white;
  color: white;
  background-color: #888;
  background-repeat: no-repeat;
}
</style>

All divs should end up with a green block in the top left corner.
<div id="container"></div>

<script src="../bootstrap.js"></script>
<script>
"use strict";

function generateGridLinesURI(size) {
  var canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  var context = canvas.getContext('2d');

  context.fillStyle = 'green';
  context.fillRect(0.5, 0.5, size - 1, size - 1);

  context.lineWidth = 2;
  context.strokeStyle = 'black';
  context.strokeRect(1, 1, size - 2, size - 2);

  return canvas.toDataURL();
}
var backgroundImage = 'url(' + generateGridLinesURI(150) + ')';

var startPosition = '0% 0%';
var endPositions = [
  'left',
  'center',
  'right',
  'top',
  'bottom',
  '10px',
  '20%',
  'center left',
  'center center',
  'right bottom',
  'right 25%',
  '10px bottom',
  '10px 40px',
  'left bottom 10px',
  'center top 20%',
  'right top 10px',
  'right bottom 80%',
  'right 80% bottom',
  'bottom left 10px',
  'left 40px bottom 10px',
  'left 20% top 20%',
  'calc(25% - 5px)',
  'calc(25% - 5px) 25%',
  'top calc(25% - 5px) center',
  'bottom left 10px',
  'bottom calc(25% - 5px) right',
  'left 10px bottom 10px',
  'left 25% top 25%',
  'left calc(25% - 5px) top 10px',
  'top 10px right calc(25% - 5px)',
  'bottom calc(25% - 5px) left 10px',
];

for (var i = 0; i < endPositions.length; i++) {
  var endPosition = endPositions[i];
  var pre = document.createElement('pre');
  pre.style.backgroundImage = backgroundImage;
  pre.className = 'anim';
  pre.innerText = 'background-position:\nfrom: ' + startPosition + '\nto: ' + endPosition;
  document.querySelector('#container').appendChild(pre);
  document.timeline.play(new Animation(pre, new KeyframeEffect([
    { backgroundPosition: startPosition },
    { backgroundPosition: endPosition },
  ]), { duration:2, easing: 'ease-in'}));
}
</script>
